import React from "react";
import {Animated, ART} from "react-native";

const {Surface, Shape, Path, ClippingRectangle, Pattern, LinearGradient, RadialGradient, Group, Text} = ART;


class Boom extends React.Component {

  static defaultProps = {
    count: 8,//烟花的数量
    bWith: 4,//烟花的宽度
    bLong: 5,//烟花的长度
    center: {x: 100, y: 100},//烟花的中心点
    distance: 30,//与烟花的中心点的距离
  }
  angleOffent = Math.random() * 360;


  render() {
    return (
      <Group>
        {this._getPath()}
      </Group>
    )
  }

  _getPath = () => {

    const {count, bWith, bLong, center, distance} = this.props;
    const {x, y} = center;
    return Array.from({
      length: count,
    }).map((col, i) => {

      const angle = 360 / count * (i + 1) + this.angleOffent;

      let x1, y1, x2, y2 = 0;
      x1 = x + Math.sin(angle * (Math.PI / 180)) * distance;
      y1 = y - Math.cos(angle * (Math.PI / 180)) * distance;
      x2 = x + Math.sin(angle * (Math.PI / 180)) * (distance + bLong);
      y2 = y - Math.cos(angle * (Math.PI / 180)) * (distance + bLong);
      const path = Path();
      path.moveTo(x1, y1);
      path.lineTo(x2, y2);
      if (bLong === 0) {
        return null
      } else {
        return (
          <Shape opacity={1 - bLong / 10} d={path} stroke="blue" strokeWidth={bWith}/>
        )
      }

    })
  }
}

export const BoomCircle = Animated.createAnimatedComponent(Boom);
